<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素关系</title>

        <script>
            function show( e ){
                console.log( e.nodeName , e.nodeType , e.innerText );

                let parent = e.parentElement ; // 父元素
                console.log( parent );
                parent.style.border = '1px solid blue' ;

                console.log( e.previousSibling ); // 前一个兄弟节点
                console.log( e.previousSibling.previousSibling );

                let prev = e.previousElementSibling ; // 前一个兄弟元素
                console.log( prev );
                if( prev ){
                    prev.style.background = '#9696fa' ;
                }

                console.log( e.nextSibling ); // 后一个兄弟节点
                console.log( e.nextSibling.nextSibling );

                let next = e.nextElementSibling ; // 后一个兄弟元素
                console.log( next );
                if( next ){
                    next.style.background = '#fa9696' ;
                }
            }
        </script>

    </head>
    <body>

        <div class="container">
            <button type="button">第一个按钮</button>
            <button type="button">第二个按钮</button>
            <button type="button" onclick="show(this)">第三个按钮</button>
            <button type="button">第四个按钮</button>
            <button type="button">第五个按钮</button>
        </div>
        
    </body>
</html>